<template>
    <span style="font-size: 25px;font-weight: bolder;">用户注册</span>
    <br>
    <br>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="学号：">
        <el-input v-model="form.id" placeholder="请输入学号"  @blur="JYid"/>
        <div v-if="JYidSingle" style="color: red;font-size: 10px;">
        账号需为10位数字!
        </div>
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input v-model="form.name" placeholder="请输入姓名" @blur="JYname"/>
        <div v-if="JYnameSingle" style="color: red;font-size: 10px;">
        请输入正确姓名！
        </div>
      </el-form-item>
      <el-form-item label="性别：">
        <el-radio-group v-model="form.sex">
        <el-radio value="男" size="large">男</el-radio>
        <el-radio value="女" size="large">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="班级：">
        <el-input v-model="form.classes" placeholder="请输入班级"/>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input type="password" v-model="form.password"  placeholder="请输入密码" @blur="JYpassword"/>
        <div v-if="JYpwd" style="color: red;font-size: 10px;">
        密码需为12位，至少包含大小写字母+特殊字符+数字
      </div>
    </el-form-item>
      
      <el-form-item label="确认密码：">
        <el-input type="password" v-model="repwd" placeholder="请确认密码" @blur="JYnew"/>
        <div v-if="pwdSingle" style="color: red;font-size: 10px;">
        请输入正确的密码！
        </div> 
      </el-form-item>
      <el-switch v-model="value"/> <span style="font-size: 12px;">&nbsp;&nbsp;&nbsp;我已阅读并明确<a>《软件开源协议》</a>和<a>《用户隐私协议》</a></span>
    </el-form>
    <el-button type="primary" @click="submit">提交</el-button>
  </template>
  
  <script lang="ts" setup>
  import { onMounted, reactive , ref, watchEffect } from 'vue'
  import { ElMessage } from 'element-plus'
  import { userRegist } from '@/api/user/Regist';
  import router from '@/router/router';

  let JYidSingle = ref(false)
  let pwdSingle = ref(false)
  let JYnameSingle = ref(false)
  let JYpwd = ref(false)
  let value = ref(false)

  onMounted(()=>{
    document.title="用户注册"
    console.log("用户注册！")
  })
  
  
  let repwd = ref('')
  let form = ref({
    id : '',
    name : '',
    sex: '',
    classes: '',
    password: '',
    admin:0,
    rankid:'-1'
  })

  function JYid(){
    const ruler = /^\d{10}$/;
    if(!ruler.test(form.value.id)){
        JYidSingle.value = true
    }
    else {
        JYidSingle.value = false
    }
  }

  function JYname(){
    const ruler = /^[\u4e00-\u9fa5]{3}$/
    if(!ruler.test(form.value.name)){
        JYnameSingle.value = true
    }
    else {
        JYnameSingle.value = false
    }
  }

  function JYpassword(){
    const ruler = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{12}$/
    if(!ruler.test(form.value.password)){
        JYpwd.value = true
    }
    else {
        JYpwd.value = false
    }
  }

  function JYnew(){
    if(form.value.password != repwd.value){
        pwdSingle.value = true
    }
    else {
        pwdSingle.value = false
    }
  }

  async function submit(){
    if(!value.value){
      ElMessage({
            message: '请阅读并确认开源协议！',
            type: 'warning',
        })
    }
    else if(!JYidSingle||!JYnameSingle||!JYpwd){
        ElMessage({
            message: '请遵循表单规则！',
            type: 'warning',
        })
    }
    // else if(form.value.id!=''&&form.value.name!=''&&form.value.password!=''&&form.value.sex!=''&&form.value.classes!=''){
    //     ElMessage({
    //         message: '请补全所有表单后提交！',
    //         type: 'warning',
    //     })
    // }
    else {
      let data = form.value
      await userRegist(data)
      .then(res=>{
        console.log(res.data);
        if(res.status === 200){
          ElMessage({
            message: res.data.data,
            type: 'success',
            plain: true,
          })
        }
        if(res.data.data == "注册成功！"){
          router.push('/')
          ElMessage({
            message: '请登录',
            type: 'success',
            plain: true,
          })
        }
      })
      .catch(err=>{
        ElMessage({
            message: err.message,
            type: 'error',
            plain: true,
          })
      })
    }
  }


  </script>
  